<template>
    <div id="aboutUs">
        <div class="copyDetail">
            <div class="title">
                {{ $t("AboutUs") }}
            </div>
            <div class="copy-name">
                <h1>{{ $t("aboutUsCopy") }}</h1>
                <p>{{ $t("aboutUsEstablished") }}</p>
            </div>
            <div class="copy-year">
                2010{{ $t("year") }}
            </div>
            <div class="copy-pic">
                <img src="@/assets/img/aboutMe1.png" alt="" />
            </div>
            <div class="copy-info">
                {{ $t("aboutUsInfo") }}
            </div>
            <div class="copy-range">
                <h1>{{ $t("aboutUsRange") }} </h1>
                <div class="rang-pic">
                    <img src="@/assets/img/aboutMe2.png" alt="" />
                </div>
            </div>
            <div class="copy-band">
                {{ $t("aboutUsBand") }} 
            </div>
            <div class="band-pic">
                <div class="band-item" v-for="(v,i) in 3" :key="i">
                    <img :src="require(`@/assets/img/aboutMe${i+4}.png`)" alt="" />
                </div>
            </div>
            <div class="copy-slogan">
                {{ $t("aboutUsSlogan") }} 
            </div>
        </div>
        <div class="serve" data-aos="fade-up"  data-aos-once='true'>
            <div class="serve-bg">
                <img src="@/assets/img/serve-bg.png" alt="">
            </div>
            <div class="serve-content">
                <div class="serve-l">
                    <img src="@/assets/img/logo.png" alt="" />
                </div>
                <div class="serve-r">
                    <h1>{{ $t('indexServeTitle') }}</h1>
                    <p>ShenZhen YANGWANG Technology company</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AOS from "aos";
export default {
    name:"aboutUs",
    data(){
        return{

        }
    },
    mounted() {
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
        // this.baiduMap()
    },
    methods:{
        baiduMap() {
            this.map = new BMap.Map("addressMap");    
            var point = new BMap.Point(113.371332,22.985796);
            this.map.centerAndZoom(point, 19);
            // 初始化地图， 设置中心点坐标和地图级别
            var marker = new BMap.Marker(point);
            this.map.addOverlay(marker);
            
            var labelgg = new BMap.Label("广东省广州市",{offset:new BMap.Size(-170,-30)});
            marker.setLabel(labelgg); //添加GPS label

            
            //地图平移缩放控件
            this.map.addControl(new BMap.NavigationControl());
            //比例尺控件
            this.map.addControl(new BMap.ScaleControl());    
            //缩略地图控件
            this.map.addControl(new BMap.OverviewMapControl());   
            //地图类型控件
            this.map.addControl(new BMap.MapTypeControl());    
            this.map.setCurrentCity("广州"); // 仅当设置城市信息时，
        }
    }
}
</script>
<style lang="scss">
.index .commonHeader .headercontain{
    background: #273443;
}
#aboutUs{
    .copyDetail{
        width:1200px;
        margin: 247px auto 0;
        position: relative;
        .title{
            font-size: 70px;
            line-height: 101px;
            color: #273443;
            font-weight: bold;
        }
        .copy-name{
            margin-top: 211px;
            h1{
                font-size: 42px;
                line-height: 76px;
                color: #273443;
                width: 500px;
                white-space:pre-line;
            }
            p{
                font-size: 42px; 
                line-height: 76px;
            }
        }
        .copy-year{
            line-height: 180px;
            color: #E15100;
            font-size: 100px;
            font-weight: bold;
            margin: 46px 0 18px;
        }
        .copy-pic{
            position: absolute;
            top: -39px;
            right: 0;
            width: 805.19px;
            height: 683.11px;
        }
        .copy-info{
            font-size: 34px;
            line-height: 61px;
            color: #273443;
            opacity: .5;
            margin-bottom: 88px;
        }
        .copy-range{
            position: relative;
            width: 1190px;
            margin-left: 5px;
            height: 490px;
            h1{
                position: absolute;
                bottom: 15px;
                left: 0;
                width: 664px;
                height: 124px;
                background: url('../../assets/img/aboutMe0.png') no-repeat;
                background-size: 100% 100%;
                color: #fff;
                font-size: 40px;
                line-height: 124px;
                text-align: center;
            }
            .rang-pic{
                width: 100%;
                height: 100%; 
            }
        }
        .copy-band{
            font-size: 34px;
            line-height: 61px;
            color: #273443;
            opacity: .5;
            margin: 98px 0 87px;
        }
        .band-pic{
            width: 1180px;
            height: 421px;
            @include display(center,left);
            .band-item{
                width: 379px;
                height: 421px;
                background: url('../../assets/img/aboutMe3.png') no-repeat;
                background-size: 100% 100%;
                @include display(center,center);
                img{
                    width: auto;
                    height: auto;
                    max-width: 100%;   
                }
            }
        }
        .copy-slogan{
            font-size: 34px;
            color: #273443;
            opacity: .5;
            line-height: 61px;
            padding-left: 5px;
            box-sizing: border-box;
            margin: 68px auto 177px;
        }
    }
}
@keyframes overflowX{
    0%{transform: translateX(0%);}
    100%{transform: translateX(-80%);}
}
@keyframes rotaes{
    0%{transform:rotateY(0)}
    100%{transform:rotateY(180deg)}
}
</style>